<template>
  <div v-if="pageFlag" style="display: flex;justify-content: space-around;align-items: end;height: 250px;">
    <dv-water-level-pond :config="cfg1" style="width: 30%;height: 200px;"></dv-water-level-pond>
    <dv-water-level-pond :config="cfg2" style="width: 30%;height: 200px;"></dv-water-level-pond>
    <dv-water-level-pond :config="cfg3" style="width: 30%;height: 200px;"></dv-water-level-pond>
  </div>
  <reacquire v-else @click="getData"/>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';

export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      timer:null,
      cfg1:{
        // 数据
        data: [88],
        // 水位图形状
        shape:'rect',
        // 水位图配色
        // colors:[],
        // 波浪数量
        // waveNum：3,
        // 波浪高度
        // waveHeight:40,
        // 波浪透明度
        // waveOpacity:0.4,
        // 信息格式化
        // formatter:'{value}%',
      },
      cfg2:{
        // 数据
        data: [66,88],
        shape: 'roundRect'
      },
      cfg3:{
        // 数据
        data: [66],
        shape: 'round'
      }
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    getData(){
      this.pageFlag=true
      this.switper
    },
    switper(){
      this.timer = setInterval(()=>{
        this.getData()
      },this.$store.state.setting.echartsAutoTime)
    }
  },
};
</script>
<style lang='scss' scoped>

</style>